<template>
  <div style="min-width: 3200px; overflow: scroll; width: 100%">
    <div class="dataTime">【发泡蜡车间一】{{ FormatTime(nowTime) }}</div>
    <div class="fpl-top">
      <el-table
        v-loading="loading"
        :data="postList"
        border
        :model="queryParams"
        style="width: 600px"
        :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
      >
        <el-table-column
          label="当前功耗(W)"
          align="center"
          prop="deviceConsumptionNow"
        />
        <el-table-column
          label="今日能耗(KWH)"
          align="center"
          prop="deviceConsumptionAll"
        />
        <el-table-column
          label="本月能耗(KWH)"
          align="center"
          prop="deviceConsumptionAllMonth"
        />
      </el-table>
    </div>
    <div class="fpl-bottom">
      <div class="demo-image">
        <router-link to="/workshop/cartDevice/yzj"
          ><img src="@/assets/images/压柱机.png"
        /></router-link>
        <!--        <div class="app-container">
          <el-table border v-loading="loading" :data="liftData">
            <el-table-column label="产量(个)" align="center" prop="yzjNum" width=" 90px" />
          </el-table>
        </div> -->
        <img
          src="@/assets/images/向右.png"
          style="width: 100px; height: 80px; margin-left: 44px"
        />
        <img src="@/assets/images/插芯机.png" style="margin-left: 46px" />
        <!--        <div class="app-container">
          <el-table border v-loading="loading" :data="liftData">
            <el-table-column label="产量(个)" align="center" prop="cdxjNum" width="90px" />
          </el-table>
        </div> -->
        <img
          src="../../../assets/images/向右.png"
          style="width: 100px; height: 80px; margin-left: 55px"
        />
        <router-link to="/workshop/cartDevice/down">
          <img
            src="../../../assets/images/自动下线.png"
            style="margin-left: 53px"
        /></router-link>
        <div class="app-container3">
          <el-table v-loading="loading" :data="liftData" border>
            <el-table-column
              label="产量(个)"
              align="center"
              prop="zdxxNum"
              width="70px"
            />
            <el-table-column
              label="速度(m/s)"
              align="center"
              prop="zdxxSpeed"
              width="90px"
            />
          </el-table>
        </div>
        <img
          src="../../../assets/images/向右.png"
          style="width: 100px; height: 80px; margin-left: 97px"
        />
        <img
          src="../../../assets/images/向右.png"
          style="width: 100px; height: 80px; margin-left: 177px"
        />
        <img
          src="../../../assets/images/网带线.png"
          style="margin-left: 46px"
        />
        <div class="app-container3" style="margin-left: -200px">
          <el-table border v-loading="loading" :data="liftData">
            <el-table-column
              label="产量(个)"
              align="center"
              prop="wdx1Num"
              width="70px"
            />
            <el-table-column
              label="速度(m/s)"
              align="center"
              prop="wdx1Speed"
              width="80px"
            />
          </el-table>
        </div>
        <img
          src="../../../assets/images/向右.png"
          style="width: 100px; height: 80px; margin-left: 55px"
        />
        <router-link to="/workshop/cartDevice/zlxt">
          <img
            src="../../../assets/images/制冷系统.png"
            style="margin-left: 48px"
        /></router-link>
        <div class="app-container3" style="margin-left: -300px">
          <el-table border v-loading="loading" :data="liftData">
            <el-table-column
              label="温度(℃)"
              align="center"
              prop="zl1Temp"
              width="70px"
            />
            <el-table-column
              label="制冷二段(℃)"
              align="center"
              prop="zl2Temp"
              width="100px"
            />
            <el-table-column
              label="制冷三段(℃)"
              align="center"
              prop="zl3Temp"
              width="100px"
            />
            <el-table-column
              label="能耗(KWH)"
              align="center"
              prop="zlConsum"
              width="90px"
            />
          </el-table>
        </div>
      </div>
      <div class="down">
        <img
          src="../../../assets/images/向上.png"
          style="width: 100px; height: 80px"
        />
        <img
          src="../../../assets/images/向上.png"
          style="width: 100px; height: 80px; margin-left: 238px"
        />
        <img
          src="../../../assets/images/向上.png"
          style="width: 100px; height: 80px; margin-left: 225px"
        />
      </div>
      <div class="maj">
        <img src="../../../assets/images/化蜡系统.png" />
        <div class="app-container3" style="margin-left: -300px">
          <el-table v-loading="loading" :data="liftData" border>
            <el-table-column
              label="蜡温1(℃)"
              align="center"
              prop="waxTemp1"
              width="80px"
            />
            <el-table-column
              label="蜡温2(℃)"
              align="center"
              prop="waxTemp2"
              width="80px"
            />
            <el-table-column
              label="蜡温3(℃)"
              align="center"
              prop="waxTemp3"
              width="80px"
            />
            <el-table-column
              label="蜡温4(℃)"
              align="center"
              prop="waxTemp4"
              width="80px"
            />
            <el-table-column
              label="蜡温5(℃)"
              align="center"
              prop="waxTemp5"
              width="80px"
            />
            <el-table-column
              label="出油口(℃)"
              align="center"
              prop="oilTemp"
              width="90px"
            />
            <el-table-column
              label="能耗(KWH)"
              align="center"
              prop="oilConsum"
              width="100px"
            />
            <!-- <el-table-column label="能耗(KWH)" align="center" prop="consumption" width="100px" /> -->
          </el-table>
        </div>
        <img
          src="../../../assets/images/向右.png"
          style="width: 100px; height: 80px; margin-left: -178px"
        />
        <router-link to="/workshop/cartDevice/fpl">
          <img
            src="../../../assets/images/发泡蜡.png"
            style="margin-left: 97px"
        /></router-link>
        <div class="app-container3" style="margin-left: -130px">
          <el-table border v-loading="loading" :data="liftData">
            <el-table-column
              label="水温(℃)"
              align="center"
              prop="fplWarmTemp"
              width="70px"
            />
            <el-table-column
              label="能耗(KWH)"
              align="center"
              prop="fplConsum"
              width="90px"
            />
            <el-table-column
              label="注蜡管道温度(℃)"
              align="center"
              prop="waxInTemp"
              width="120px"
            /><el-table-column
              label="冷却水[入]管道温度(℃)"
              align="center"
              prop="inColdTemp"
              width="108px"
            />
            <el-table-column
              label="冷却水[出]管道温度(℃)"
              align="center"
              prop="outColdTemp"
              width="108px"
            />
          </el-table>
        </div>
        <router-link to="/workshop/cartDevice/yrz">
          <img
            src="../../../assets/images/预热罩.png"
            style="margin-left: 120px"
        /></router-link>
        <div class="app-container3" style="margin-left: -177px">
          <el-table border v-loading="loading" :data="liftData">
            <el-table-column
              label="内温(℃)"
              align="center"
              prop="yrzTemp"
              width="70px"
            />
            <el-table-column
              label="胎膜温度(℃)"
              align="center"
              prop="yrzGlassTemp"
              width="100px"
            />
            <el-table-column
              label="能耗(KWH)"
              align="center"
              prop="yrzConsum"
              width="90px"
            />
          </el-table>
        </div>
        <img src="../../../assets/images/灌装.png" style="margin-left: 89px" />
        <!-- <div class="app-container">
          <el-table border v-loading="loading" :data="liftData">
            <el-table-column label="灌装量(L)" align="center" prop="gzBottle" width="100px" />
          </el-table>
        </div> -->
      </div>
      <div class="up_down">
        <img src="../../../assets/images/包装机.png" />
        <!--  <div class="app-container" style="margin-left: -137px;">
          <el-table border v-loading="loading" :data="liftData">
            <el-table-column label="生产数量(个)" align="center" prop="bzNum" width="110px" />
          </el-table>
        </div> -->
        <img
          src="../../../assets/images/向左.png"
          style="width: 100px; height: 80px; margin-left: 44px"
        />
        <img
          src="../../../assets/images/网带线.png"
          style="margin-left: 36px"
        />
        <!-- <div class="app-container" style="margin-left: -149px;">
          <el-table border v-loading="loading" :data="liftData">
            <el-table-column label="产量(个)" align="center" prop="wdx2Num" width="70px" />
            <el-table-column label="速度(m/s)" align="center" prop="wdx2Speed" width="90px" />
          </el-table>
        </div> -->
        <img
          src="../../../assets/images/向左.png"
          style="width: 100px; height: 80px; margin-left: 61px"
        />
        <router-link to="/workshop/cartDevice/tbj">
          <img
            src="../../../assets/images/贴标机.png"
            style="margin-left: 62px"
        /></router-link>
        <div class="app-container3" style="margin-left: -137px">
          <el-table border v-loading="loading" :data="liftData">
            <el-table-column
              label="生产数量(个)"
              align="center"
              prop="tbNum"
              width="110px"
            />
          </el-table>
        </div>
        <img
          src="../../../assets/images/向左.png"
          style="width: 100px; height: 80px; margin-left: 51px"
        />
        <router-link to="/workshop/cartDevice/zdsx">
          <img
            src="../../../assets/images/自动上线.png"
            style="margin-left: 43px"
        /></router-link>
        <div class="app-container3" style="margin-left: -149px">
          <el-table v-loading="loading" :data="liftData" border>
            <el-table-column
              label="产量(个)"
              align="center"
              prop="zdsxNum"
              width="70px"
            />
            <el-table-column
              label="速度(m/s)"
              align="center"
              prop="zdsxSpeed"
              width="90px"
            />
          </el-table>
        </div>
        <img
          src="../../../assets/images/向左.png"
          style="width: 100px; height: 80px; margin-left: 58px"
        />
        <router-link to="/workshop/cartDevice/lxsx">
          <img src="../../../assets/images/螺旋提升机.png" style="margin: 56px"
        /></router-link>
        <div class="app-container3" style="margin-left: -120px">
          <el-table border v-loading="loading" :data="liftData">
            <el-table-column
              label="速度(m/s)"
              align="center"
              prop="lxtsSpeed"
              width="80px"
            />
            <el-table-column
              label="产量(m/s)"
              align="center"
              prop="lxtsSpeed"
              width="80px"
            />
          </el-table>
        </div>
        <img
          src="../../../assets/images/向左.png"
          style="width: 100px; height: 80px; margin-left: -18px"
        />
        <img
          src="../../../assets/images/右下左111.png"
          style="margin-top: -498px; margin-right: -800px"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { oilnow, lineState } from "@/api/system/line.js";
export default {
  data() {
    return {
      times: null,
      timer: undefined,
      nowTime: new Date(),
      loading: false,
      postList: [],
      queryParams: {
        deviceConsumptionNow: null,
        deviceConsumptionAll: null,
        deviceConsumptionAllMonth: null,
      },
      liftData: [
        {
          yzjNum: null,
          cdxjNum: null,
          zdxxNum: null,
          zdxxSpeed: null,
          wdx1Num: null,
          wdx1Speed: null,
          zlTemp: null,
          zlConsum: null,
          waxTemp1: null,
          waxTemp2: null,
          waxTemp3: null,
          waxTemp4: null,
          waxTemp5: null,
          oilTemp: null,
          oilConsum: null,
          fplWarmTemp: null,
          fplConsum: null,
          yrzTemp: null,
          yrzGlassTemp: null,
          yrzConsum: null,
          gzBottle: null,
          lxtsSpeed: null,
          zdsxNum: null,
          zdsxSpeed: null,
          tbNum: null,
          wdx2Num: null,
          wdx2Speed: null,
          bzNum: null,
        },
      ],
    };
  },
  created() {
    // 显示时间
    this.timer = setInterval(() => {
      this.nowTime = new Date().toLocaleString();
    });
    this.getList();
    this.times = setInterval(() => {
      this.getList();
    }, 100000 * 10);
    this.List();
  },

  // 销毁定时器
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  destroyed() {
    //销毁
    clearInterval(this.times);
  },
  methods: {
    getList() {
      this.loading = true;
      oilnow().then((response) => {
        this.postList = response.data;
        this.loading = false;
      });
      console.log(this.queryParams);
    },
    List() {
      this.loading = true;
      lineState().then((response) => {
        this.liftData = response.data;
        this.loading = false;
      });
      console.log(this.queryParams);
    },
    FormatTime() {
      //返回显示的日期时间格式
      var date = new Date();
      var year = this.formatTime(date.getFullYear());
      var month = this.formatTime(date.getMonth() + 1);
      var day = this.formatTime(date.getDate());
      var hour = this.formatTime(date.getHours());
      var minute = this.formatTime(date.getMinutes());
      var second = this.formatTime(date.getSeconds());
      var weekday = date.getDay();
      var weeks = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      var week = weeks[weekday];
      return `${year}-${month}-${day} ${hour}:${minute}:${second} ${week}`;
    },
    formatTime(n) {
      //判断是否需要加0
      if (n < 10) {
        return "0" + n;
      } else {
        return n;
      }
    },
  },
};
</script>

<style scoped>
.dataTime {
  /* text-align: center; */
  font-size: 38px;
  color: #19198c;
  margin-left: 341px;
  /* margin-top: -90px; */
}

.fpl-top {
  border: 1px solid pink;
  width: 600px;
  margin-left: 500px;
  margin-top: 50px;
  margin-bottom: 80px;
  /* margin-top: 2%; */
}

.clear {
  clear: both;
}

.app-container3 {
  margin-top: 320px;
  margin-left: -128px;
}

.fpl-bottom {
  margin-top: 170px;
}

.demo-image {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  margin-top: -270px;
}

.maj {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  margin-left: 170px;
  margin-top: -90px;
}

.down {
  margin-left: 476px;
  margin-top: -130px;
}

.up_down {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  margin-top: -96px;
}
</style>
